<template>
	<view>
		<view>
			<table-title content="白卡办理申请列表"></table-title>
			<view class="choice-bar">
				<view class="nav-choice" :class="isActive[index]" v-for="(value,index) in navChoice" :key="index"
					@click="changeActive(index)">{{value}}</view>
			</view>
			<application-record v-for="(item,index) in recordList" :key="index"
				:company="item.title" :building="item.building" :time="item.time"
				:goods="item.outline" :state="item.state" @getClick="checkDetails(item.orderNum,item.status)"></application-record>
		    <view v-show="isLoadMore"> 
			  	<uni-load-more :status="loadStatus" ></uni-load-more>
		    </view>
		</view>
	</view>
</template>

<script>
	import {
		syncGetOrderList,
	} from "../../..//util/network.js"
	export default{
		data() {
			return {
				userRightDetail:'',
				token:'',
				choosedState : '待确认',
				navChoice: ['待处理','已处理','办理中','待反馈','全部'],
				isActive: ['active-choice','nav-choice','nav-choice','nav-choice','nav-choice'],
				activeIndex: 0,
				userId:'',         //用户账号
				recordList:[],     //工单列表
				pageNo:1,
				pageSize:10,
				states:[0,2,5],
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
			}
		},
		onNavigationBarButtonTap(){
			console.log("[info]","导航栏按钮触发监听")
			uni.navigateTo({
				url:'../applicationDetails/applicationDetails?id=待分配' + '&state=' + '-1'
			})
		},
		onReachBottom() {
			if(!this.isLoadMore){
				this.isLoadMore=true
				this.pageNo+=1
				this.getOrderByState('白卡申请办理类',this.states)
			}
		},
		methods: {
			/*
			功能：根据单号展示工单详细页面
			参数：
			orderNum：工单号
			state：工单当前状态
		    */
			checkDetails(orderNum,state) {
				uni.navigateTo({
					url:'../applicationDetails/applicationDetails?id=' + orderNum + '&state=' + state
				})
			},
			
			/*
			功能：根据菜单栏选择的不同状态，渲染当前视图，并根据状态实时查询工单列
			参数：
			*/
			changeActive(e) {
				this.pageNo = 1
				this.pageSize = 10
				this.recordList=[]
				if(e!==this.activeIndex){
					let tmp = [...this.isActive]
					tmp[e] = 'active-choice'
					tmp[this.activeIndex] = 'nav-choice'
					this.activeIndex = e
					this.isActive = tmp
					this.choosedState = this.navChoice[this.activeIndex]
				}
				console.log("info","在此处调接口，根据choosedStat，重载recordList数组")
				switch(this.choosedState) {
					 case "待处理":
						this.states = [0,2,5]
					    break;
					 case "已处理":
					    this.states = [3,4,6,7]
				        break;
					 case "办理中":
						this.states = [1]
					    break;
					 case "待反馈":
					    this.states = [3,6]
				        break;
					 case "全部":
						this.states = [0,1,2,3,4,5,6,7]
					    break;
				} 
				if(this.userRightDetail.whiteCard.primeAuth == 7 || this.userRightDetail.whiteCard.primeAuth == 8){
					switch(this.choosedState) {
						 case "待处理":
							this.states = [1]
							break;
						 case "已处理":
							this.states = [3,4,6,7]
							break;
						 case "办理中":
							this.states = [2,5]
							break;
						 case "待反馈":
							this.states = [3,6]
							break;
						 case "全部":
							this.states = [0,1,2,3,4,5,6,7]
							break;
					} 
				}
				if(this.userRightDetail.invoice.finanCommRight){
					switch(this.choosedState) {
						 case "待处理":
							this.states = [-1]
							break;
						 case "已处理":
							this.states = [3,4,6,7]
							break;
						 case "办理中":
							this.states = [0,1,2,5]
							break;
						 case "待反馈":
							this.states = [3,6]
							break;
						 case "全部":
							this.states = [0,1,2,3,4,5,6,7]
							break;
					} 
				}
				if(!this.isLoadMore){
					this.isLoadMore=true
					this.loadStatus='loading'
					this.getOrderByState('detail',this.states)
				}
			},
			listPush(item){
				let itemTmp = {'orderNum':'','title':'白卡','building':'','time':'',
				'outline':'','status':-1, 'state':''}
				itemTmp.orderNum = item.id
				itemTmp.time = item.updateTime.replace('T',' ')
				itemTmp.building = item.buildTitle + item.createUserInfo.houseNumber + '号'
				itemTmp.outline = JSON.parse(item.detail)[0].name.substring(0,7) + '...'
				itemTmp.status = item.status
				switch(item.status) {
				     case 0:
				        itemTmp.state = "待管家指派"
				        break;
				     case 1:
				        itemTmp.state = "待工程办卡"
				        break;
					 case 2:
				        itemTmp.state = "待管家派送"
					    break;
					 case 3:
				        itemTmp.state = "待用户领卡"
					    break;
					 case 4:
				        itemTmp.state = "用户使用中"
					    break;
 				     case 5:
 				        itemTmp.state = "待管家回收"
 				        break;
					 case 6:
					    itemTmp.state = "待用户收款"
					    break;
					 case 7:
					    itemTmp.state = "已确认退款"
					    break;
					 default:
				        itemTmp.state = "全部"
				} 
				this.recordList.push(itemTmp)
				
			},
			/*
			功能：根据工单类别及状态实时查询工单列表
			参数：
			orderType：工单类别
			state：工单当前状态
		    */
			getOrderByState(orderType,state){
				let a = syncGetOrderList("white-card/list", state, this.pageNo, this.pageSize)
				 a.then((res)=>{
					 if(res.data.code == 200){
						for (var i = 0; i < res.data.data.whiteCardList.length; i++) {
							this.listPush(res.data.data.whiteCardList[i])
						}
						if(res.data.data.whiteCardList.length <= 0){
							this.isLoadMore = false
						}else{
							this.isLoadMore = false
							this.loadStatus = 'nomore'
						}
					}else {
						this.isLoadMore = false
						uniRedirect('/login/login')
						console.log("[info]","请求失败请检查网络情况")
					}
				})
			}
		},

		onLoad(option) {
			//传入userType
			this.userRightDetail = uni.getStorageSync("userRight")
			if(this.userRightDetail.whiteCard.primeAuth == 7 || this.userRightDetail.whiteCard.primeAuth == 8){
				this.states = [1]
			}
			if(this.userRightDetail.invoice.finanCommRight){
				this.states = [-1]
			}
		},

		mounted() {
			console.log("[info]","测试初始化" + uni.getStorageSync('userinfo'))
			if(uni.getStorageSync('userinfo') != ""){
				this.token = uni.getStorageSync('token')
			}else{
				uni.navigateTo('../../login/login')
			}

		},
		onShow() {
			if(!this.isLoadMore){
				this.isLoadMore = true
				this.pageNo = 1
				this.pageSize = 10
				this.recordList=[]
				this.getOrderByState('onShow',this.states)
			}
		}
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.nav-choice{
		height: 100rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		border-bottom: solid 5rpx #F1F1F1;
	}
	.choice-bar{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content:center;
		color: #808080;
	}
	.active-choice{
		height: 100rpx;
		width: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight:600;
		color: #DD524D;
		border-bottom: solid 5rpx #DD524D;
	}
</style>
